<template>
	<!-- <el-alert title="异步组件动态加载使用了正处于试验阶段的<Suspense>组件, 其API和使用方式可能会改变. <Suspense> is an experimental feature and its API will likely change." type="warning" show-icon style="margin-bottom: 15px;"/> -->

	<el-card shadow="never" header="个人信息">
		<el-form ref="form" :model="form" :rules="rules" label-width="120px" style="margin-top:20px;">
			<el-form-item label="账号">
				<el-input v-model="form.user" disabled></el-input>
				<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-select v-model="form.sex" placeholder="请选择">
					<el-option label="保密" value="0"></el-option>
					<el-option label="男" value="1"></el-option>
					<el-option label="女" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="form.phone" type="tel"></el-input>
			</el-form-item>
			<el-form-item label="邮箱">
				<el-input v-model="form.email" type="email"></el-input>
			</el-form-item>
			<el-form-item label="个性签名">
				<el-input v-model="form.about" type="textarea" maxlength="40" show-word-limit></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save">保存</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import tool from '@/utils/tool'

	export default {
		data() {
			return {
				form: {
					id: null,
					user: "",
					name: "",
					sex: "",
					phone: "",
					email: "",
					about: ""
				},
				rules: {
					id: [
						{ required: true, message: '用户ID不能为空'}
					],
					user: [
						{ required: true, message: '请输入账号名'}
					],
					name: [
						{ required: true, message: '请输入真实姓名'}
					],
					sex: [
						{ required: true, message: '请选择性别'}
					],
					about: [
						{ required: true, message: '请输入个性签名'}
					],
					phone: [
						{ required: true, message: '请输入手机号码'}
					],
					email: [
						{ required: true, message: '请输入邮箱地址'}
					]
				}
			}
		},
		mounted() {
			let userInfo = tool.data.get("USER_INFO")
			this.form.id = userInfo.userId
			this.form.user = userInfo.accountNo
			this.form.name = userInfo.username
			this.form.sex = userInfo.sex
			this.form.phone = userInfo.mobile
			this.form.email = userInfo.email
			this.form.about = userInfo.signature
		},
		methods: {
			async save() {
				var valid = this.$refs.form.validate(valid => {
					return valid
				})
				if(!valid){
					return false;
				}
				var data = {
					username: this.form.name,
					sex: this.form.sex,
					signature: this.form.about,
					mobile: this.form.phone,
					email: this.form.email
				}
				var updateAccountInfo = await this.$API.user.updateAccountInfo.post(data)
				if(updateAccountInfo.code == 0){
					this.$alert("账户信息修改成功！请重新登录以刷新缓存", "修改成功", {
						type: 'success',
						center: true
					}).then(() => {
						this.$router.replace({
							path: '/login'
						})
					}).catch(() => {})
				}else{
					this.$message.error(updateAccountInfo.message)
				}
			}
		}
	}
</script>

<style>
</style>
